<template>
  <h3>{{$store.state.userName}}</h3>
  <button @click="$store.commit('changeUserName','烦')">通过commit更改</button>
  <button @click="changeState">vue3更改state</button>
  <h3>{{name}}</h3>
  <router-view/>
</template>

<script>
  import {toRef} from 'vue'
  import {useStore} from 'vuex'
  export default {
    setup() {
      const store = useStore();
      const changeState = () => {
        store.commit('changeUserName','aaa')
      }
      //更改为响应式数据
      const name = toRef(store.state,'userName');

      return { changeState,name }
    }
  }
</script>

<style lang="less">

</style>
